/**
 * 基本柱状图
 */
import React, { FC } from 'react';
import { Empty } from 'antd';
import { Chart, Geom, Axis, Tooltip } from 'bizcharts';

export interface BasicColumnProps {
  /** 图表数据 */
  data: Array<object>;
  /** X轴变量 */
  axisX: string;
  /** Y轴变量 */
  axisY: string;
  /** 图表高度 */
  height?: number;
  /** 图表内部padding */
  padding?: [number, number, number, number];
}

const LabelConfig = {
  textStyle: {
    textAlign: 'center', // 文本对齐方向，可取值为： start center end
    textBaseline: 'middle', // 文本基准线，可取 top middle bottom，默认为middle
  },
};

const BasicColumn: FC<BasicColumnProps> = props => {
  const { data = [], height = 400, axisX, axisY, padding } = props;

  const scale = {
    [`${axisY}`]: {
      type: 'linear',
      minTickInterval: 1,
    },
  };

  return (
    <div>
      {data.length === 0 ? (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      ) : (
        <Chart height={height} data={data} forceFit padding={padding} scale={scale}>
          <Axis name={axisX} label={LabelConfig} />
          <Axis name={axisY} />

          <Tooltip
            showTitle={false}
            itemTpl={`
            <div>
              <div style="background-color:{color};color:#fff;padding:2px 15px;">{title}</div>
              <div data-index={index} style="padding:2px 15px;">
                <span><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span></span>
                <span>数量：{value}</span>
              </div>
            </div>
          `}
            g2-tooltip={{
              padding: '0',
            }}
          />

          <Geom type="interval" position={`${axisX}*${axisY}`} />
        </Chart>
      )}
    </div>
  );
};

export default BasicColumn;
